<!--
 * @Author: 涵崽
 * @Date: 2023-12-07 17:00:18
 * @email: 1045654@qq.com
 * @gitee: https://gitee.com/han-zai
 * @LastEditors: 涵崽
 * @LastEditTime: 2023-12-07 17:00:38
 * @Description: 微信：1045654
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #000;
      }
      .container {
        position: relative;
      }

      .container h2 {
        position: absolute;
        font-size: 96px;
        transform: translate(-50%, -50%);
      }
      h2:nth-child(1) {
        color: transparent;
        -webkit-text-stroke: 2px skyblue;
      }
      h2:nth-child(2) {
        color: skyblue;
        animation: move 4s ease-in-out infinite;
      }

      @keyframes move {
        0% {
          clip-path: polygon(
            31% 82%,
            67% 66%,
            96% 80%,
            100% 100%,
            25% 100%,
            0 100%,
            0 78%
          );
        }
        50% {
          clip-path: polygon(
            43% 19%,
            72% 9%,
            100% 32%,
            100% 100%,
            25% 100%,
            0 100%,
            0 17%
          );
        }
        100% {
          clip-path: polygon(
            31% 82%,
            67% 66%,
            96% 80%,
            100% 100%,
            25% 100%,
            0 100%,
            0 78%
          );
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>MrLiao</h2>
      <h2>MrLiao</h2>
    </div>
  </body>
</html>
